<template>
  <div class="businesslist">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <template>
      <el-table
        :data="businesslist"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
            >
              <el-form-item label="店铺名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="评分">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="销售量">
                <span>{{ props.row.rating_count }}</span>
              </el-form-item>
              <el-form-item label="分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in titlearr"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="$router.push('/addfood')"
              >添加食品</el-button
            >
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="businesscount"
        @current-change="handleCurrentChange"
        ref="pagination"
      >
      </el-pagination>
    </template>
    <el-dialog
      title="店铺信息"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="店铺名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类">
          <el-cascader
            v-model="value"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            type="textarea"
            v-model="form.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺照片">
          <el-upload
            class="avatar-uploader"
            action="https://elm.cangdu.org/v1/addimg/:shop"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="open1">取 消</el-button>
        <el-button
          type="primary"
          @click="sub"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getbusinesslist, getbusinesscount, postbusiness, getbusinessclassify,delbusiness } from '@/api/list';
export default {
  data() {
    return {
      businessclassify: [],
      imageUrl: '',
      value: [],
      options:[],
      tooo: {},
      form: {},
      centerDialogVisible: false,
      title: '商家列表',
      businesslist: [],
      businesscount: 0,
      titlearr: [
        {
          label: '店铺名称',
          prop: 'name',
        },
        {
          label: '店铺地址',
          prop: 'address',
        },
        {
          label: '店铺介绍',
          prop: 'description',
        },
      ],
    };
  },
  methods: {
    open1() {
        this.$message('取消操作');
        this.centerDialogVisible = false
      },
    open2() {
      this.$message({
          message: '提交成功',
          type: 'success'
        });
      },
      open4() {
        this.$message.error('抱歉,您的权限不够');
      },
    sub() {
      this.centerDialogVisible = false;
      this.postbusiness(this.form)
      this.open2()
    },
    async postbusiness(sss) {
      await postbusiness(sss);
      console.log(sss);
    },
    onSubmit() {
      console.log('submit!');
    },
    async getbusinesslist(sss) {
      const res = await getbusinesslist((sss - 1) * 8, 8);
      this.businesslist = res.data;
      console.log(this.businesslist);
    },
    async getbusinessclassify() {
      const res = await getbusinessclassify();
      this.businessclassify = res.data;
      for (var i = 0; i < this.businessclassify.length; i++) {
        var children=[]
        for(var a=1; a<this.businessclassify[i].sub_categories.length;a++){
          children.push({
            label:this.businessclassify[i].sub_categories[a].name,
            value:this.businessclassify[i].sub_categories[a].name
          })
        }
        this.options.push({
          label: this.businessclassify[i].name,
          value: this.businessclassify[i].name,
          children:children
        });
      }
      console.log(this.businessclassify);
      console.log(this.options);
    },
    async getbusinesscount() {
      const res = await getbusinesscount();
      this.businesscount = res.data.count;
      console.log(this.businesscount);
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.centerDialogVisible = true;
      this.form = {
        id:row.name,
        name: row.name,
        address: row.address,
        description: row.description,
        phone: row.phone,
        image_path:row.image_path
      };
      this.imageUrl = 'https://elm.cangdu.org/img/' + row.image_path;
      this.getbusinessclassify();
      this.value=row.category.split('/')
      console.log(this.value);
    },
    handleDelete(index, row) {
      delbusiness(row.id)
      this.open4()
    },
    handleCurrentChange(val) {
      this.getbusinesslist(val);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
  created() {
    this.getbusinesslist(1);
    this.getbusinesscount();
  },
};
</script>
<style lang="scss" scoped>
.businesslist {
  width: 100%;
  .header {
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
    .el-breadcrumb {
      margin-top: 15px;
      padding-left: 10px;
    }
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    text-indent: 50px;
  }
  .el-pagination {
    margin-top: 20px;
    padding-left: 300px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #8b8a8a;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
</style>
